<template>
  <div class="detail_container">
    <div class="head_title" v-if="!detailForm.id">创建粉尘数据</div>
    <div class="head_title" v-else-if="detailForm.id && isEdit">编辑粉尘数据</div>
    <div class="head_title" v-else-if="detailForm.id && !isEdit">查看粉尘数据</div>
    <el-divider></el-divider>
    <div class="px-20">
      <el-form :model="params" :disabled="detailForm.id && !isEdit" ref="expertForm" class="divForm" label-width="75px" :rules="rules" label-position="left" size="small">


        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="设备编码" prop="code">
              <el-input v-model="params.code" placeholder="请输入设备编码" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="pm2.5" prop="pm2">
              <el-input v-model="params.pm2" placeholder="请输入pm2.5" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="pm10" prop="pm10">
              <el-input v-model="params.pm10" placeholder="请输入pm10" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="原数据" prop="originalData">
              <el-input v-model="params.originalData" placeholder="请输入原数据" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="创建人id" prop="createId">
              <el-input v-model="params.createId" placeholder="请输入创建人id" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="更新人id" prop="updateId">
              <el-input v-model="params.updateId" placeholder="请输入更新人id" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="删除标志" prop="delFlag">
              <el-input v-model="params.delFlag" placeholder="请输入删除标志" />
            </el-form-item>
          </el-col>

            </el-row>
      </el-form>
    </div>
    <div class="flex p-20">
      <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.id || isEdit">确认提交</el-button>
      <el-button @click="isEdit = true" type="primary" v-if="detailForm.id && !isEdit">编辑</el-button>
      <el-button @click="show = false">返回</el-button>
    </div>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        params:{
            id: null,
            code: null,
            pm2: null,
            pm10: null,
            originalData: null,
            createId: null,
            createBy: null,
            createTime: null,
            updateId: null,
            updateBy: null,
            updateTime: null,
            delFlag: null,
        },
        rules: {
        }
      }
    },
    props: {
      editVisible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      detailForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isEdit:{
        type:Boolean,
        default:()=>{
          return false
        }
      },
    },
    watch:{

    },
    computed: {
      show: {
        get () {
          return this.editVisible
        },
        set (val) {
          this.$emit('update:editVisible', val)
        }
      },
    },
    created () {
      if(this.detailForm.id){
        this.params = {...this.detailForm}
      }
    },
    methods: {
      // 确认
      sureForm(formName) {
        this.$refs [formName].validate((valid) => {
          if (valid) {
            if(this.detailForm.id){
              this.$emit('submitForm', this.params,this.detailForm.id)
            }else{
              this.$emit('submitForm', this.params)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
    }

  }
</script>

<style scoped="scoped" lang="scss">
  .titile_txt{
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 19px;
    margin-bottom: 15px;
  }
</style>
